<template>
	<view class="w-100 bg-cF6F7FB min-vh-100">
		<catalogue></catalogue>
		<view class="bg">
			<image class="w-100 h-100" :src="`${cosUrl}/bg/banner_contactus.png`" mode=""></image>
		</view>
		<bread :textArr="['首页', '联系我们']" :bg="'#373938'"></bread>
		<view class="px-2 py-3">
			<view class="bg-cfff px-2 brs-16rpx text-32rpx pb-5">
				<view class="wenan text-center">
					<image class="img-48rpx" src="../../static/website/telelv.svg" mode=""></image>
					<view class="pt-5">
						<view class="">
							咨询热线：{{contact_telephone}}
						</view>
						<view class="pt-2 tetxt-909193" style="">
							（{{work_time}}）
						</view>
					</view>
				</view>
				<view class="wenan text-center">
					<image class="img-48rpx" src="../../static/website/location.svg" mode=""></image>
					<view class="pt-5 m-auto" style="width: 510rpx;">
						{{address}}
					</view>
				</view>
				<view class="wenan text-center">
					<image class="img-48rpx" src="../../static/website/mail.svg" mode=""></image>
					<view class="pt-5 m-auto" style="width: 510rpx;">
						技术/商务邮箱：{{email}}
					</view>
				</view>
				<!-- #ifndef MP-TOUTIAO -->
				<view class="wenan text-center row d-flex items-center mx-0">
					<view class="col px-0 pl-2">
						<view class="lt-solid"></view>
					</view>
					<view class="text-909193 px-2">
						微信联系
					</view>
					<view class="col px-0 pr-2">
						<view class="lt-solid"></view>
					</view>
				</view>
				<view class="qr row row-cols-2 mx-0">
					<view class="col d-flex flex-column justify-center">
						<view class="d-flex justify-content-center">
							<image class="img" :src="weixin_image" mode="" @click="previewImage(weixin_image)"></image>
						</view>
						<view class="text-center">
							咨询微信
						</view>
						<text class="text-909193 text-center pt-1" :selectable="true">
							{{weixin}}
						</text>
					</view>
					<view class="col d-flex flex-column justify-center">
						<view class="d-flex justify-content-center">
							<image class="img" :src="gzh_image" mode="" @click="previewImage(gzh_image)"></image>
						</view>
						<view class="text-center">
							公众服务号
						</view>
						<text class="text-909193 text-center pt-1" :selectable="true">
							{{gzh}}
						</text>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="maps w-100 mb-5 mt-3">
			<image class="img w-100" :src="map_image" mode=""></image>
		</view>
		<Footer></Footer>
		<view class="gotop" @click="goTop" v-show="scrollNum>300">
			<image src="../../static/website/back.png" style="width: 140rpx;height: 140rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		http_contactus,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				contact_telephone: '186-8403-0581',
				work_time: '周一至周五9:30-18:00',
				address: '成都市锦江区喜树街锦江文化创意产业中心2期1608室',
				email: '',
				weixin_image: '',
				weixin: '',
				gzh_image: '',
				gzh: '',
				map_image: '',
			}
		},
		onLoad() {
			this.shareTitle = '联系我们'
			this.shareDesc = '这里有我们的电话，邮箱，微信，公众号，地址等联系信息'
			this.share5v4Image = `${this.cosUrl}/bg/banner_contactus.png`
			this.share1v1Image = `${this.cosUrl}/bg/shareimage_contactus_1v1.png`
			http_contactus()
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.contact_telephone = res.data.contact_telephone
						this.work_time = res.data.work_time
						this.address = res.data.address
						this.email = res.data.email
						this.weixin_image = res.data.weixin_image
						this.weixin = res.data.weixin
						this.gzh_image = res.data.gzh_image
						this.gzh = res.data.gzh
						this.map_image = res.data.map_image
					}
				})
		},
		methods: {
			previewImage(image_url){
				uni.previewImage({
					// current:0,
					urls: [image_url],
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.banner {
		height: 546rpx;
		background-size: 100% 100%;
	}
	.bg {
		width: 100%;
		height: 546rpx;
	}

	.tag {
		background: #373938;
		font-size: 32rpx;
		color: #F3F4F6;
	}

	.wenan {
		padding-top: 96rpx;
	}

	.text-909193 {
		color: #909193;
	}

	.lt-solid {
		border-top: 2rpx solid #EDEDED;
	}

	.qr {
		padding-top: 48rpx;

		.img {
			height: 220rpx;
			width: 220rpx;
		}
	}

	.maps {
		.img {
			height: 752rpx;
		}
	}
</style>
